<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!--顶部 -->
      <Toptoolbar>
        <!-- 添加按钮 -->
        <template #leftbtn>
          <el-button v-if="checkperm('addProperty')" type="primary" @click="visproperty=true">添加房产</el-button>
        </template>
        <!-- 下拉菜单 -->
        <template #select>
          <el-dropdown trigger="click" @command="categoryproperty">
            <el-button>
              全部分类<i class="el-icon-arrow-down el-icon--right" />
            </el-button>

            <el-dropdown-menu slot="dropdown">
              <div class="content">
                <el-dropdown-item v-for="item in categorylist" :key="item.id" :command="item.id">{{ item.title }}</el-dropdown-item>
              </div>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- 下拉菜单 -->
          <el-dropdown trigger="click" @command="agentproperty">
            <el-button>
              全部经纪<i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <div class="content">
                <el-dropdown-item
                  v-for="item in agentlist"
                  :key="item.id"
                  :command="item.id"
                >{{ item.name }}</el-dropdown-item>
              </div></el-dropdown-menu>
          </el-dropdown>
        </template>
        <!-- 搜索 -->
        <template #search>
          <template>
            <el-select
              v-model="value"
              filterable
              remote
              :remote-method="remotemethod"
              :loading="loading"
              width="500px"
              placeholder="请输入关键字"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.title"
                :value="item.title"
              />
            </el-select>
          </template>
          <el-button icon="el-icon-search" @click="getproperty" />

        </template></Toptoolbar>
      <!-- 表格 -->
      <el-card>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="image"
            label="封面"
          >
            <template v-slot="{row}">
              <img v-Errorimg="UserHeader" :src="row.image" alt="" style="width:80px">
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
          />
          <el-table-column
            prop="tags"
            label="标签"
          >
            <template v-slot="{row}">
              <el-tag v-for="(item,index) in row.tags" :key="index" type="success">
                {{ item }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
          /> <el-table-column
            prop="category"
            label="分类"
            :formatter="categoryformatter"
          />
          <el-table-column
            prop="agent"
            label="经纪"
            :formatter="agentformatter"
          /> <el-table-column
            prop="price"
            label="价格"
          />
          <el-table-column
            prop="content"
            label="介绍"
          >
            <template v-slot="{row}">
              <div v-html="row.content" />
            </template>
          </el-table-column>
          <el-table-column
            prop="photos"
            label="图片"
          >
            <template v-slot="{row}">
              <img v-for="(item,index) in row.photos" :key="index" v-Errorimg="UserHeader" style="width:20px" :src="item" alt="">
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
          >
            <template v-slot="{row}">
              <el-row type="flex">
                <el-button size="small" type="primary" icon="el-icon-edit" @click="putproperty(row.id)" />
                <el-button size="small" icon="el-icon-delete" @click="delbtn(row.id)" />
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="dataquery._limit"
            :current-page="currentpage"
            @current-change="currentchange"
          />
        </el-row>
      </el-card>
      <!-- 弹窗 -->
      <addproperty ref="addproperty" :visproperty.sync="visproperty" @getlist="getlist" />
    </div>
  </div>
</template>
<script>
import { getproperlist, delproprty, getagentsTotal, getcategories } from '@/api/property'
import addproperty from './components/addproperty.vue'
import UserHeader from '@/assets/images/bigUserHeader.png'
import { getAgentslist } from '@/api/agents'

export default {

  components: { addproperty },
  data() {
    return {
      UserHeader,
      agentlist: [], // 经纪人下拉列表
      categorylist: [],
      total: 0, // 数据数量
      currentpage: 1, // 页码
      dataquery: {
        _limit: 6,
        _start: 0
      },
      value: '', // 搜索框数据
      tableData: [], // 数据
      visproperty: false,
      loading: false, // 搜索框加载
      options: []// 搜索数据
    }
  },
  async created() {
    this.getlist()
    const res = await getagentsTotal()
    this.total = res.data
    // 获取经济人下拉列表
    const list = await getAgentslist({ _limit: 100, _start: 0 })
    this.agentlist = list.data
    // 获取分类下拉列表
    const data = await getcategories({ _limit: 100, _start: 0 })
    this.categorylist = data.data
    console.log(175, data)
  },
  methods: {
    // 获取房产列表
    async getlist() {
      const current = (this.currentpage - 1) * this.dataquery._limit
      const res = await getproperlist({ _limit: this.dataquery._limit, _start: current })
      console.log(118, res)
      this.tableData = res.data
    },
    // 处理经纪人数据
    agentformatter(row, col, cell) {
      if (cell && cell.name) {
        return cell.name
      }
    },
    // 编辑
    putproperty(id) {
      this.visproperty = true
      this.$refs.addproperty.getputproperty(id)
    },
    // 处理分类数据
    categoryformatter(row, col, cell) {
      if (cell && cell.title) {
        return cell.title
      }
    },
    // 删除按钮
    delbtn(id) {
      this.$confirm('确定要删除吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delproprty(id)
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        // 渲染
        this.getlist()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 页码改变
    currentchange(val) {
      if (val === 1) {
        this.currentpage = 1
      } else {
        this.currentpage = val
      }
      this.getlist()
    },
    // 点击经纪
    async agentproperty(val) {
      const current = (this.currentpage - 1) * this.dataquery._limit
      const data = await getproperlist({ agent: val, _start: current, _limit: this.dataquery._limit })
      this.tableData = data.data
    },
    // 点击分类
    async categoryproperty(val) {
      console.log(244, val)
      const current = (this.currentpage - 1) * this.dataquery._limit
      const data = await getproperlist({ category: val, _start: current, _limit: this.dataquery._limit })
      this.tableData = data.data
    },
    async remotemethod(val) {
      if (val !== '') {
        this.loading = true
        const current = (this.currentpage - 1) * this.dataquery._limit
        const res = await getproperlist({ title_contains: val, _limit: this.dataquery._limit, _start: current })
        this.loading = false
        this.options = res.data
      }
    },
    async  getproperty() {
      if (this.value === '') {
        return
      }
      this.tableData = this.options
      this.value = ''
    }

  }
}
</script>
<style lang="scss" scoped>
.pagination{
  margin-top: 20px;
}
.content{
  height: 200px;
      overflow: auto;

    }
</style>
